////
/// Components
/// Plate keyframes
////

@keyframes plate-small {
  0%,
  100% {
    transform: scale(1, 1);
  }

  10% {
    transform: scale(1.1, 0.96);
  }

  25% {
    transform: scale(0.925, 1.075);
  }

  50% {
    transform: scale(1.0125, 0.975);
  }

  75% {
    transform: scale(0.975, 1.0125);
  }

  95% {
    transform: scale(1.005, 0.995);
  }
}

@keyframes plate-medium {
  0%,
  100% {
    transform: scale(1, 1);
  }

  10% {
    transform: scale(1.15, 0.95);
  }

  25% {
    transform: scale(0.9, 1.1);
  }

  50% {
    transform: scale(1.025, 0.96);
  }

  75% {
    transform: scale(0.98, 1.025);
  }

  95% {
    transform: scale(1.01, 0.985);
  }
}

@keyframes plate-big {
  0%,
  100% {
    transform: scale(1, 1);
  }

  10% {
    transform: scale(1.2, 0.9);
  }

  25% {
    transform: scale(0.85, 1.15);
  }

  50% {
    transform: scale(1.075, 0.95);
  }

  75% {
    transform: scale(0.975, 1.05);
  }

  95% {
    transform: scale(1.0125, 0.98);
  }
}

@keyframes plate-placed {
  0%,
  100% {
    color: get-color(coal, dark);
  }

  50% {
    color: get-color(brand, blue);
  }
}
